<template>
  <ElRow v-if="members.length">
    <ElCol :span="24">
      <ElButton
        v-for="member in members"
        :key="member.id"
        :type="selectedId === member.id ? 'primary' : ''"
        round
        plain
        @click="handleSelect(member.id)"
        >{{ member.grade }}</ElButton
      >
    </ElCol>
  </ElRow>
</template>

<script>
import _ from 'lodash';
import {http, catchAppError} from '@/util';
import url from '@/config';

export default {
  data() {
    return {
      members: [],
      selectedId: 0
    };
  },
  beforeMount() {
    this.fetchMemberGrade();
  },
  methods: {
    fetchMemberGrade() {
      http
        .post(url.storeMemberGrade)
        .then(members => {
          this.members = members;
          if (this.members.length) {
            this.$emit('update:noMembers', false);
            this.selectedId = _.get(members[0], 'id', 0);
          }
        })
        .catch(catchAppError);
    },
    handleSelect(id) {
      this.selectedId = id;
      this.$emit('selected', id);
    }
  }
};
</script>

<style lang="scss">
.members {
  padding: 13px 45px;
  background: #fff;
}
</style>
